import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  Image,
} from 'react-native';

import Modal from "react-native-modal";
import { GLOBAL } from '../../config/global';
import { style } from "../../theme/style";

const loadingGif = require('../../imgs/loading.gif');
const scale = GLOBAL.SCALE;

export default class HotUpdatePage extends Component {
  constructor(props) {
    super(props);

    this.state = {
      isVisible: this.props.isVisible
    }
  }

  componentWillReceiveProps(props) {
    if (!props) return;
    this.setState({
      isVisible: props.isVisible
    })
  }

  render() {
    let { downloadProgress } = this.props
    let total = (downloadProgress.totalBytes / (1024 * 1024)).toFixed(2);
    let received = (downloadProgress.receivedBytes / (1024 * 1024)).toFixed(2);
    let progress = parseInt((received / total) * 100);
    return (
      <Modal
        isVisible={this.state.isVisible}
        animationIn={'bounceIn'}
        animationOut={'fadeOut'}
        useNativeDriver={true}
        style={styles.modal}
      >
        <View style={styles.content}>
          <Image source={loadingGif} />
          <Text style={styles.tips}>发现补丁啦 , 努力加载中</Text>
          <View style={styles.out}>
            <View style={[styles.inner, { width: `${progress}%` }]}></View>
          </View>
          <Text style={[styles.info]}>下载进度:{progress || 0}%</Text>
        </View>
      </Modal>
    );
  }
}

const styles = StyleSheet.create({
  modal: {
    alignItems: 'center',
    margin: 0
  },
  content: {
    width: 300 * scale,
    backgroundColor: '#fff',
    borderRadius: 8,
    padding: 15,
    alignItems: 'center',
  },
  tips: {
    marginTop: 12 * scale,
    fontSize: 13 * scale,
  },
  info: {
    fontSize: 12 * scale,
    marginVertical: 10 * scale,
    color: '#666'
  },
  out: {
    marginTop: 20 * scale,
    width: 200 * scale,
    height: 8 * scale,
    backgroundColor: '#eee',
    borderRadius: 4 * scale
  },
  inner: {
    backgroundColor: style.color.themeColor,
    height: 8 * scale,
    borderRadius: 4 * scale
  }

});
